<template>
  <div class="main-area">
    <el-container>
      <el-aside width="150px">
        <el-menu :default-active="activeIndex" @select="changeIndex">
          <el-menu-item index="1">订购机票</el-menu-item>
          <el-menu-item index="2">航班动态</el-menu-item>
        </el-menu>
      </el-aside>
      <transition name="left" mode="out-in">
        <el-container v-if="radio">
          <trip></trip>
        </el-container>
        <el-container v-else>
          <flight-status></flight-status>
        </el-container>
      </transition>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import FlightStatus from './FlightStatus/Index.vue';
import Trip from './Trip/Index.vue';
export default defineComponent({
  name: 'MainArea',
  components: { FlightStatus, Trip },
  setup() {
    const activeIndex = ref('1');
    const changeIndex = (index: string, indexPath: string) => {
      activeIndex.value = index;
    };
    const radio = ref(true);
    watch(
      () => activeIndex.value,
      () => {
        // radio.value = !radio.value;
        if (activeIndex.value === '1') {
          radio.value = true;
        } else {
          radio.value = false;
        }
      }
    );
    return {
      activeIndex,
      changeIndex,
      radio,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
$radius: 8px;
.main-area {
  max-width: 930px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 60px;
  width: 61%;
  height: 400px;
  background-color: transparent;
  .el-menu-item,
  .el-submenu__title {
    height: 200px;
    line-height: 200px;
    width: 120px;
    float: right;
    text-align: center;
    font-weight: 800;
  }
  .el-dropdown-menu,
  .el-menu {
    background: transparent;
    border-right: 0;
  }
  .el-menu-item {
    background-color: #fff;
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: rgb(220, 225, 233);
  }
  .el-menu-item.is-active {
    width: 130px;
    background-color: $themeColor;
    color: white;
    font-size: 17px;
  }
  //右侧container总体高度
  :deep(.el-tabs.el-tabs--top) {
    min-height: 400px;
    min-width: 810px;
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  :deep(.el-tabs.el-tabs--top .el-tabs__header) {
    border-top-right-radius: $radius;
  }
  :deep(.el-tabs.el-tabs--top .el-tabs__item) {
    font-weight: 600;
  }
  :deep(.el-form-item__label),
  :deep(.el-radio-button .el-radio-button__inner) {
    font-weight: 600;
  }
}
.left-enter-from,
.left-leave-to {
  transform: translate3d(-2%, 0, 0);
}
.left-leave-from,
.left-enter-to {
  transform: translate3d(0, 0, 0);
}
.left-enter-active,
.left-leave-active {
  transition: all 0.2s ease-out;
}
</style>
